<template>
    <div>
        <!-- 搜索条件 --><br>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-left: 10px;">
            <el-form-item label="用户名">
                <el-input v-model="formInline.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-input v-model="formInline.department" placeholder="所属部门"></el-input>
            </el-form-item>
            <el-form-item label="登录状态">
                <el-select v-model="formInline.accountStatus" placeholder="登录状态">
                    <el-option v-for="item in statusList" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属角色">
                <el-select v-model="formInline.role" placeholder="所属角色">
                    <el-option v-for="item in roleList" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="最后登录">
                <el-date-picker v-model="formInline.lastLogin" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="最后登录">
                </el-date-picker>
            </el-form-item><br>
            <el-form-item style="padding-left: 10px;">
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="default" icon="el-icon-refresh" @click="onReset">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" icon="el-icon-delete" @click="handleDeleteAll">删除</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="username" label="用户名称" width="180">
            </el-table-column>
            <el-table-column prop="department" label="所属部门" width="180">
            </el-table-column>
            <el-table-column prop="loginAccount" label="登录账号">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="手机号码">
            </el-table-column>
            <el-table-column prop="accountStatus" label="帐号状态">
            </el-table-column>
            <el-table-column prop="role" label="所属角色">
            </el-table-column>
            <el-table-column prop="lastLogin" label="最后登录">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button type="text" size="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" size="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 编辑弹窗 -->
        <el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="30%">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" prop="department">
                    <el-input v-model="form.department"></el-input>
                </el-form-item>
                <el-form-item label="登录账号" prop="loginAccount">
                    <el-input v-model="form.loginAccount"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phoneNumber">
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="帐号状态" prop="accountStatus">
                    <el-select v-model="form.accountStatus">
                        <el-option v-for="item in statusList" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属角色" prop="role">
                    <el-select v-model="form.role">
                        <el-option v-for="item in roleList" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最后登录" prop="lastLogin">
                    <el-date-picker v-model="form.lastLogin" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEditSubmit">保存</el-button>
                    <el-button type="danger" @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 添加弹窗 -->
        <el-dialog title="新增角色" :visible.sync="addDialogVisible" width="30%">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" prop="department">
                    <el-input v-model="form.department"></el-input>
                </el-form-item>
                <el-form-item label="登录账号" prop="loginAccount">
                    <el-input v-model="form.loginAccount"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phoneNumber">
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="帐号状态" prop="accountStatus">
                    <el-select v-model="form.accountStatus">
                        <el-option v-for="item in statusList" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属角色" prop="role">
                    <el-select v-model="form.role">
                        <el-option v-for="item in roleList" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="最后登录" prop="lastLogin">
                    <el-date-picker v-model="form.lastLogin" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAddSubmit">保存</el-button>
                    <el-button type="danger" @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import { getRoleList, addRole, editRole, deleteRole, deleteBatch, getStatus, getRole } from '@/api/role'

export default {
    name: 'Role',

    data() {
        return {
            // 数据表格信息
            tableData: [],

            // 分页信息
            currentPage: 1,
            pageNum: 1,
            pageSize: 10,
            total: 0,

            // 搜索条件
            formInline: {
                username: '',
                department: '',
                accountStatus: '',
                role: '',
                lastLogin: ''
            },

            // 下拉框信息
            statusList: [],
            roleList: [],

            // 选中行id
            ids: [],

            // 编辑/添加弹窗表单
            form: {
                username: '',
                department: '',
                loginAccount: '',
                phoneNumber: '',
                accountStatus: '',
                role: '',
                lastLogin: ''
            },

            // 弹窗状态
            addDialogVisible: false,
            editDialogVisible: false,

        }
    },

    methods: {
        // 初始化数据
        fetchData() {
            // 传入下拉框信息
            this.setSelectData();
            // 获取登录状态
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                username: this.formInline.username,
                department: this.formInline.department,
                accountStatus: this.formInline.accountStatus,
                role: this.formInline.role,
                lastLogin: this.formInline.lastLogin
            }
            getRoleList(params)
                .then(response => {
                    console.log("初始化数据, response", response)
                    this.tableData = response.data.list,
                    this.total = response.data.total
                }).catch(error => {
                    console.log("初始化数据, error", error)
                })
        },

        // 传入下拉框信息
        setSelectData() {
            // 清空下拉框信息
            this.statusList = [];
            this.roleList = [];
            // 获取登录状态
            getStatus().then(response => {
                console.log("获取登录状态, response", response)
                for (let i = 0; i < response.data.length; i++) {
                    this.statusList.push(response.data[i].accountStatus)

                }
            })
            // 获取角色
            getRole().then(response => {
                console.log("获取角色, response", response)
                for (let i = 0; i < response.data.length; i++) {
                    this.roleList.push(response.data[i].role)
                }
            })
        },

        // 删除
        handleDelete(index, row) {
            console.log("删除, row", row)
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteRole(row.userId)
                .then(response => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        // 删除的选中行
        handleSelectionChange(selectionRowArray) {
            console.log("删除的选中行", selectionRowArray)
            this.ids = [];
            for (let i = 0; i < selectionRowArray.length; i++) {
                this.ids.push(selectionRowArray[i].userId)
            }
        },

        // 批量删除
        handleDeleteAll() {
            this.$confirm('确定删除选定的[' + this.ids + ']角色?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBatch(this.ids).then(response => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.fetchData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        // 新增
        handleAdd() {
            this.form = {};
            // 传入下拉框信息
            this.setSelectData();
            this.addDialogVisible = true;
        },

        // 新增提交
        handleAddSubmit() {
            console.log("新增提交", this.form)
            addRole(this.form).then(response => {
                this.$message({
                    type: 'success',
                    message: '新增成功!'
                })
                this.addDialogVisible = false;
                this.fetchData()
            })
        },

        // 编辑
        handleEdit(index, row) {
            console.log("编辑", index, row)
            // 传入下拉框信息
            this.setSelectData();
            this.form = row;
            this.editDialogVisible = true;
        },

        // 编辑提交
        handleEditSubmit() {
            console.log("编辑提交", this.form)
            editRole(this.form).then(response => {
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                })
                this.editDialogVisible = false;
                this.fetchData()
            })
        },

        // 页面大小变化
        handleSizeChange(size) {
            this.pageSize = size;
            this.fetchData();
        },

        // 页码变化
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchData();
        },

        // 搜索
        onSubmit() {
            this.fetchData();
        },

        // 重置
        onReset() {
            this.formInline = {
                username: '',
                department: '',
                accountStatus: '',
                role: '',
                lastLogin: ''
            }
            this.fetchData();
        },

    },

    created() {
        this.fetchData();
    }

}
</script>